import React from 'react'

import { Button, Form, Input, NavBar, Space, Toast } from 'antd-mobile'

import { Link } from 'react-router-dom'

import { API } from '../../utils'

import styles from './index.module.css'

// 用户名验证，长度为5到8，只能出现数字、字母、下划线
const userNameRules = [
  { required: true, message: '用户名不能为空' },
  { pattern: /^\w{5,8}$/, message: '长度为5到8，只能出现数字、字母、下划线' }
]

// 密码验证，长度为5到12，只能出现数字、字母、下划线
const passwordRules = [
  { required: true, message: '用户名不能为空' },
  { pattern: /^\w{5,12}$/, message: '长度为5到12，只能出现数字、字母、下划线' }
]

export default function Login({ location, history }) {
  // 表单提交事件的事件处理函数
  const handleSubmit = async formInfo => {
    // 获取账号和密码
    const { data: res } = await API.post('/user/login', formInfo)

    // 判断是否登录失败
    if (res.status !== 200) return Toast.show({ icon: 'fail', content: res.description })

    // 登录成功
    localStorage.setItem('hkzf_token', res.body.token)
    Toast.show({
      icon: 'success',
      content: '登录成功！',
      // 提示框消失后跳转
      afterClose() {
        if (!location.state) {
          // 此时，表示是直接进入到了该页面，直接调用 go(-1) 即可
          history.go(-1)
        } else {
          history.replace(location.state.from.pathname)
        }
      }
    })
  }

  return (
    <div className={styles.root}>
      {/* 顶部导航 */}
      <NavBar onBack={() => history.go(-1)}>用户登录</NavBar>

      {/* 登录表单 */}
      <Form
        className={styles.form}
        onFinish={handleSubmit}
        footer={
          <div className={styles.formSubmit}>
            <Button className={styles.submit} type="submit" size="large" block>
              登 录
            </Button>
          </div>
        }
      >
        <Form.Item name="username" className={styles.formItem} rules={userNameRules}>
          <Input className={styles.input} placeholder="请输入账号" />
        </Form.Item>
        <Form.Item name="password" className={styles.formItem} rules={passwordRules}>
          <Input className={styles.input} type="password" placeholder="请输入密码" />
        </Form.Item>
      </Form>
      <Space justify="center" block>
        <Link to="/registe">还没有账号，去注册~</Link>
      </Space>
    </div>
  )
}
